<template>
  <div>
    <el-container style="height: 100vh">
      <el-header>
        <div>
          <img src="../assets/zuaLogo.jpg" height="50px">
          <span>后台管理系统</span>
        </div>
        <div>
          <el-dropdown>
              <span class="el-dropdown-link">
                <el-avatar :src="require('../assets/1.jpg')" :size="50"></el-avatar>
              </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided @click="exit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            unique-opened
            default-active="/user"
            :collapse="isCollapsed"
            router>
            <el-menu-item v-for="link in links" :index="link.path" :key="link.path">
              <template slot="title">
                <i :class="link.icon"></i>
                <span>{{link.name}}</span>
              </template>

            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "Home",
    data(){
      return{
        isCollapsed:false,
        links:[
          {name:"用户管理",path:"/user",icon:"el-icon-user"},
          {name:"商品管理",path: "/good",icon:"el-icon-goods"},
          {name:"订单管理",path: "/order",icon:"el-icon-s-order"}
        ]
      }
    },
    methods:{
      exit(){
        window.location = "https://www.baidu.com/"
      }
    }
  }
</script>

<style scoped>
  .el-container{
    border: solid 1px red;
  }
  .el-header{
    border: dotted 1px yellow;
    font-size: 30px;
    background: #373d41;
    display: flex;
    color: #ffffff;
    align-items: center;
    justify-content: space-between;
  }
  .el-header img{
    height: 50px;
  }
  .el-aside{
    border: dotted 1px aquamarine;
    background:#545c64;
    text-align: center;
  }
  .el-main{
    border: dotted 1px green;
    background: #eaedf1;
  }
  .el-footer{
    border: dotted 1px gray;
  }
</style>
